<template>
  <div v-if="showTopUp">
    <el-dialog
      :visible.sync="showTopUp"
      :before-close="close"
      title="付款"
      width="400px"
    >
      <div>
        <div style="margin: 10px;">
          <span style="font-size: 16px; font-weight: bold;">支付金额</span>
          <span style="font-size: 18px; font-weight: bold; color: red; margin-left: 10px;">{{ dataList.totalMoney /100 }}</span>
          <span style="font-size: 14px; font-weight: bold;">元</span>
        </div>
        <div style="margin: 10px;">
          <span style="font-size: 16px; font-weight: bold;">支付方式</span>
          <el-radio-group v-model="payMethod" style="width: 200px; margin-left: 10px;">
            <el-radio
              v-for="item in dict.pay_method"
              :key="item.value"
              :label="item.value"
              @change="modifyPay"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <div>
          <qriously
            v-if="payMethod=='4'"
            :value="wxInfo.qrCode"
            :size="120"
            class="img-code"
          />
          <qriously
            v-if="payMethod=='14'"
            :value="zfbInfo.qrCode"
            :size="120"
            class="img-code"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="close">取消</el-button>
      <!-- <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { payForVip, paySuccess } from '@/api/order/pay'
// import { Notification } from 'element-ui'
import { crud } from '@crud/crud'
import order from '@/api/order/order'
import axios from 'axios'
import crudOrder from '@/api/card/order'
import { Notification } from 'element-ui'

export default {
  mixins: [crud()],
  dicts: ['pay_method'],
  props: {
    showTopUp: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      payMethod: '4', // 4微信，14支付宝
      timer: null,
      wxInfo: {
        qrCode: ''
      },
      zfbInfo: {
        qrCode: ''
      }
    }
  },
  watch: {
    showTopUp(val) {
      if (val) {
        this.wxInfo.qrCode = ''
        this.zfbInfo.qrCode = ''
        this.getPayInfo(this.payMethod)
      }
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    // 修改支付方式
    modifyPay(v) {
      clearInterval(this.timer)
      this.wxInfo.qrCode = ''
      this.zfbInfo.qrCode = ''
      this.getPayInfo(v)
    },
    close() {
      clearInterval(this.timer)
      this.$emit('close')
    },
    // 获取购买信息
    getPayInfo(method) {
      this.payMethod = method
      const data = {
        // customerId: this.dataList.customerId,
        customerId: '15273257112',
        payMethod: this.payMethod, // 4微信   14支付宝
        orderType: 801,
        totalMoney: this.dataList.totalMoney,
        reqChannel: 'channel', // 请求渠道
        orderNo: this.dataList.orderNo // 订单编号
      }
      var that = this
      axios.get('https://api.yunliangedu.com/niuzy/pay/payForRecharge', {
        params: data
      })
        .then(function(response) {
          if (response.data.resultCode === '0000') {
            if (response.data.payMethod === 4) {
              that.wxInfo = response.data
            } else if (response.data.payMethod === 14) {
              that.zfbInfo = response.data
            }
            clearInterval(that.timer)
            that.timer = setInterval(that.isPay, 2000)
          }
          console.log(response)
        })
        .catch(function(error) {
          console.log(error)
        })

      // payForVip(data).then(res => {
      //   if (res.resultCode === '0000') {
      //     if (res.payMethod === 4) {
      //       this.wxInfo = res
      //     } else if (res.payMethod === 14) {
      //       this.zfbInfo = res
      //     }
      //     clearInterval(this.timer)
      //     this.timer = setInterval(this.isPay, 2000)
      //   }
      //   console.log(res)
      // }).catch(err => {
      //   console.log(err)
      // })
    },
    // 查询是否购买
    isPay() {
      const data = {
        customerId: '15273257112',
        // customerId: this.dataList.customerId,
        sdxTransId: ''
      }
      if (this.payMethod === '4') {
        data.productId = this.wxInfo.productId
      }
      if (this.payMethod === '14') {
        data.sdxTransId = this.zfbInfo.sdxTransId
      }
      var that = this
      axios.get('https://api.yunliangedu.com/niuzy/gxs/paynotify/paySuccess', {
        params: data
      })
        .then(function(response) {
          if (response.data.resultCode === '0000') {
            clearInterval(that.timer)
            const param = {}
            param.orderStatus = 1
            param.orderNo = that.dataList.orderNo
            order.edit(param).then(res => {
              that.$alert('充值成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  that.$emit('close', true)
                }
              })
            })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
      // paySuccess(data).then(res => {
      //   if (res.resultCode === '0000') {
      //     clearInterval(this.timer)

      //     const param = {}
      //     param.orderStatus = 1
      //     param.orderNo = this.dataList.orderNo
      //     order.edit(param).then(res => {
      //       //this.crud.refresh()
      //       this.$alert('充值成功', '提示', {
      //         confirmButtonText: '确定',
      //         callback: action => {
      //           this.$emit('close', true)
      //         }
      //       })
      //     })

      //   }
      // }).catch(err => {
      //   console.log(err)
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
  .img-code {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-top: 10px;
  }
</style>
